﻿
<script>
$(document).ready(function() {

	//rotation speed and timer
	var speed = 1000;
	var run = setInterval('rotate()', speed);	
	
	//grab the width and calculate left value
	var item_width = $('#slides2 li').outerWidth(); 
	var left_value = item_width * (-1); 
        
    //move the last item before first item, just in case user click prev button
	$('#slides2 li:first').before($('#slides2 li:last'));
	
	//set the default item to the correct position 
	$('#slides2 ul').css({'left' : left_value});

    //if user clicked on prev button
	$('#prev2').click(function() {

		//get the right position            
		var left_indent = parseInt($('#slides2 ul').css('left')) + item_width;

		//slide the item            
		$('#slides2 ul:not(:animated)').animate({'left' : left_indent}, 200,function(){    

            //move the last item and put it as first item            	
			$('#slides2 li:first').before($('#slides2 li:last'));           

			//set the default item to correct position
			$('#slides2 ul').css({'left' : left_value});
		
		});

		//cancel the link behavior            
		return false;
            
	});

 
    //if user clicked on next button
	$('#next2').click(function() {
		
		//get the right position
		var left_indent = parseInt($('#slides2 ul').css('left')) - item_width;
		
		//slide the item
		$('#slides2 ul:not(:animated)').animate({'left' : left_indent}, 200, function () {
            
            //move the first item and put it as last item
			$('#slides2 li:last').after($('#slides2 li:first'));                 	
			
			//set the default item to correct position
			$('#slides2 ul').css({'left' : left_value});
		
		});
		         
		//cancel the link behavior
		return false;
		
	});        
	
	//if mouse hover, pause the auto rotation, otherwise rotate it
	$('#slides2').hover(
		
		function() {
			clearInterval(run);
		}, 
		function() {
			run = setInterval('rotate()', speed);	
		}
	); 
        
});

//a simple function to click next link
//a timer will call this function, and the rotation will begin :)  
function rotate() {
	$('#next2').click();
}
        
        
        
</script>




<style>
#carousel3 {
	width:277px;
	height:308px;	
	margin:0 auto;
	overflow:hidden;
	border: 1px solid #F3F3F3;
	margin-top:-46px;
}

#slides2 {
	overflow:hidden;
	/* fix ie overflow issue */
	position:relative;
	width:285px;
	height:157px;
	border:0 none;
	text-align: center;
	margin-left: 16px;			
}

/* remove the list styles, width : item width * total items */	
#slides2 ul {
	position:relative;
	left:0;
	top:0;
	list-style:none;
	margin:0;
	padding:0;	
	width:750px;
}

/* width of the item, in this case I put 250x250x gif */
#slides2 li {
	width:122px;
	height:200px;	
	float:left;
}

#slides2 li img {
	padding:4px;
	border: medium none;
}

/* Styling for prev and next buttons */
#buttons2 {
	padding:0 0 5px 0;	
	float:right;
	margin-top: 8px;
	margin-right: 16px;
}

#buttons2 a {
	display:block; 
	width:31px; 
	height:32px;
	
	float:left;
	outline:0;
}

a#prev2 {
	
}

a#prev2:hover {
	
}

a#next2 {
	
}

a#next2:hover {
	
}

.clear2 {clear:both}

</style>


<div id="carousel3">

	<a href="#"> 
		<img src="imagem.php?imagem=images/banner_promo.png" width="279" height="88" border="0"/>
	</a>
	
	<div id="slides2"> 
		<ul style="left: -272.731px;">
			
			<?php include "modulos/anuncios/lista-selecaoanunciantesvideo.php"; ?>
			
		</ul>
		<div class="clear2"></div>
	</div>
	
	<div class="clear2"></div>
	
	<div id="buttons2">
		<a id="prev2" href="#" alt="Anterior"> << </a>
		<a id="next2" href="#" alt="Próximo"> >> </a>
		<div class="clear2"></div>
	</div>
	
</div>
